<template>
	<view class="page">

		<custom-navigation title="会员概览">
		</custom-navigation>

		<view class="flex-row-center" @click="showPicker=true"
			style="background-color: #38C09EFF;padding-top: 20rpx;padding-left: 24rpx;padding-bottom: 22rpx;">
			<view class="search-box flex-row-center">
			<view class="input" v-model="searchStr">{{start_time.length==0?'请选择时间':start_time+'至' +end_time}}</view>
			<image src="/static/rili.png"></image>
			</view> 
		</view>

		<scroll-view class="body-scroll" scroll-y="true" @scrolltolower="loadMoreData">
			<view class="stats-box">
				<view class="title-box flex-row-center">
					会员概览
					<image src="../../static/help.png" @click="showDialog(1)"> </image>
				</view>
				<view class="ir-box">
					<view class="ir flex-column-center" v-for="(item,index) in stats_data"
						:style="{'marginLeft':index%2==1?'30rpx':'0'}">
						<view class="text1">{{item.value}}</view>
						<view class="text2">{{item.label}}</view>
					</view>
				</view>
			</view>
			
			<view class="box">
							<view class="title-box flex-row-center">
								充值销售额趋势
							</view>
							<view class="xs-total">
								<view class="item flex-column" style="margin-top: 32rpx;">
									<view class=" flex-column" style="flex: 1;">
									 
										<Line-chart :dataAs="lineData" v-if="lineData" canvasId="ht1" labelKey="label"
											valueKey="value" :yAxisAs="{
			    formatter: {
			        type: 'percent' //type:number percent String,额外参数:fixed:NUmber,name:String
			    }
			}" />
									</view>
								</view>
							</view>
						</view>
			
		 </scroll-view>
		<mx-date-picker :show="showPicker" type="range" :value="value" :show-tips="true" :begin-text="'开始'"
			:end-text="'结束'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
			<report-alert :title="dialogTitle" :message="dialogMessage" :show="dialogShow" @leftAction="dialogShow=false"></report-alert>
	</view>
</template>

<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	import LineChart from '@/components/stan-ucharts/LineChart.vue';
	export default {
		components: {
			MxDatePicker,
			LineChart
		},
		data() {
			return {
				datas: [],
				page: 1,
				searchStr: '',
				stats_data: {},
				start_time: '',
				end_time: '',
				showPicker: false,
				date: '2019/01/01',
				time: '15:00:12',
				datetime: '2019/01/01 15:00:12',
				range: ['2019/01/01', '2019/01/06'],
				rangetime: ['2019/01/08 14:00', '2019/01/16 13:59'],
				type: 'rangetime',
				value: '',
				lineData: null,
				
				dialogTitle: '',
				dialogMessage: '',
				dialogShow: false
			}
		},
		onLoad() {
			this.getData()
		},
		onShow() {
			if (uni.getStorageSync("refresh")) {
				uni.setStorageSync("refresh", null)
				this.page = 1;
				this.getData()
			}
		},
		methods: {
			showDialog(type) {
				this.dialogShow = false 
					this.dialogTitle = "会员概览"
					this.dialogMessage =
						"【会员总数】：周期内，平台所有的会员数量。\n【新增会员】：周期内，平台新增的会员数量。\n【充值会员人数】：周期内，平台充值会员总人数，一人多次充值，要去重处理，记为一人。\n【充值总额】：周期内，会员充值和手动充值的充值总额，不包括充值赠送的金额，手动扣减储值金额也不减少。\n【销售会员人数】：周期内，购买过平台商品的会员总人数，一人多次下单，要去重处理，记为一人。\n【会员销售总额】：周期内，销售总额为商品实际销售的金额，不包括会员卡的充值，当售后退款时，需减少退款的销售额；销售总额=会员卡消费+现金收入+支付宝账户+微信账户+其他收入"
				 
				this.dialogShow = true
			},
			onSelected(e) { //选择
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
					//选择的值
					console.log('value => ' + e.value);
					//原始的Date对象
					console.log('date => ' + e.date);

					this.start_time = e.value[0].replaceAll("/", "-")
					this.end_time = e.value[1].replaceAll("/", "-") + " 23:59"
					this.page = 1;
					this.getData()
				}
			},
			itemOnClick(item) {
				let info = JSON.stringify(item)

				this.$navigateTo('/pages/report/flow_detail?info=' + info)
			},
			tabSwitch(index) {
				this.tabindex = index;
				this.page = 1;
				this.getData(index);
			},
			doSearch() {
				this.page = 1;
				this.getData(this.tabindex)
				this.getCounts()
			},
			loadMoreData() {
				this.page++;
				this.getData(this.tabindex)
			},
			getData() {
				uni.showLoading({
					title: "加载中..."
				})

				this.$apiPost("/retail/select/srvretail_member_report_date_select", {
					"serviceName": "srvretail_member_report_date_select",
					"colNames": [
						"*"
					],
					"condition": this.end_time.length == 0 ? [] : [{
						"colName": "calendar_date",
						"value": this.start_time,
						"ruleType": "ge"
					}, {
						"colName": "calendar_date",
						"value": this.end_time,
						"ruleType": "le"
					}],
					"page": {
						"pageNo": this.page,
						"rownumber": 10
					}
				}).then(res => {
					uni.hideLoading()
					if (res.state == "SUCCESS") {
						this.stats_data = res.stats_data
					
					
					
					this.datas = res.data;
					let amountTatal = 0;
					let countTatal = 0;
					let amounts = [];
					let counts = [];
					let xAxisLables = [];
					
					for (let i = this.datas.length - 1; i >= 0; i--) {
						let item = this.datas[i]
						xAxisLables.push(item.calendar_date)
						counts.push(item.sale_amount)
						amounts.push(item.date_rc_amount)
						amountTatal += item.sale_amount_total
						countTatal += item.sale_count_total
					}
					
					this.sale_amount_all_total = amountTatal.toFixed(2) * 1;
					this.sale_count_all_total = countTatal.toFixed(2) * 1;
					this.lineData = {
						//柱状图Compent  //label应为series value 应为
						label: xAxisLables,
						value: [{
								name: '充值金额',
								data: amounts
							},
							{
								name: '销售金额',
								data: counts
							}
						]
					}
					
					
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fliter-box {
		margin-right: 24rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-left: 40rpx;
			margin-right: 10rpx;
		}

		text {
			font-size: 36rpx;
			font-weight: 700;
			color: rgba(255, 255, 255, 1);
		}
	}

	.search-box {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		background: #FFFFFF;
		margin-right: 24rpx;
		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 39rpx;

		}

		.input {
			flex: 1;
			font-size: 14px;
			font-weight: 500;
			margin-left: 28rpx;
			color: #999999
		}
	}

	.tab-box {
		height: 100rpx;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		justify-content: center;
		padding-left: 72rpx;
		padding-right: 72rpx;

		.item {
			padding-top: 32rpx;
			flex: 1;

			.bubble {

				min-width: 24rpx;
				height: 24rpx;
				background: rgba(212, 48, 48, 1);
				color: white;
				font-size: 20rpx;
				line-height: 24rpx;
				border-radius: 12rpx;
				font-weight: 500;
				text-align: center;
				top: -13rpx;
				right: -20rpx;
				position: absolute;

			}

			.unchecktxt {
				position: relative;
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
			}

			.checktxt {
				position: relative;
				font-size: 30rpx;
				font-weight: 700;
				color: rgba(56, 192, 158, 1);
			}

			.in {
				margin-top: 4rpx;
				width: 48rpx;
				height: 6rpx;
				background-color: rgba(56, 192, 158, 1);
				;
				border-radius: 3rpx;
			}
		}
	}

	.stats-box {
		margin-left: 24rpx;
		width: 702rpx;
		opacity: 1;
		border-radius: 12rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 1);

		.title-box {
			color: rgba(47, 47, 47, 1);
			font-size: 36rpx;
			font-weight: 700;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-left: 10rpx;
			}
		}

		.ir-box {
			flex-wrap: wrap;
			display: flex;

			.ir {
				margin-top: 20rpx;
				width: 308rpx;
				height: 78px;
				border-radius: 12rpx;
				border: 2rpx solid rgba(227, 227, 227, 1);
				justify-content: center;

				.text1 {
					font-size: 30rpx;
					font-weight: 700;
					color: rgba(212, 48, 48, 1);
				}

				.text2 {
					margin-top: 8rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: rgba(47, 47, 47, 1);
				}
			}
		}

	}

	.item-view {
		padding: 24rpx;
		width: 702rpx;
		margin-left: 24rpx;
		margin-top: 24rpx;
		border-radius: 12rpx;
		background: rgba(255, 255, 255, 1);
		position: relative;
		flex-wrap: wrap;

		.lable {
			font-size: 30rpx;
			color: rgba(0, 0, 0, 1);
		}

		.value {
			font-size: 30rpx;
			color: rgba(153, 153, 153, 1);
		}

		.amount {
			font-size: 40rpx;
			font-weight: 700;
			top: 114rpx;
			color: rgba(226, 36, 23, 1);
			position: absolute;
			right: 24rpx;
			padding: 0;
			margin: 0;
		}
	}
	
		.box { 
			padding: 24rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			border-radius: 12rpx;
			margin-top: 24rpx;
			margin-left: 24rpx;
			width: 702rpx;
			position: relative;
	
			.title-box {
				color: rgba(47, 47, 47, 1);
				font-size: 36rpx;
				font-weight: 700;
	
				image {
					width: 18px;
					height: 18px;
					margin-left: 10rpx;
				}
			}
	
			.box-total {
				.item {
					.text {
						font-size: 26rpx;
						font-weight: 700;
						color: rgba(153, 153, 153, 1);
					}
	
					.text1 {
						margin-top: 4rpx;
						font-size: 40rpx;
						font-weight: 700;
						color: rgba(34, 34, 34, 1);
					}
	
					.line {
						width: 2rpx;
						height: 60rpx;
						background-color: rgba(241, 241, 241, 1);
					}
				}
			}
	
	
			.xs-total {
				.text {
					font-size: 26rpx;
					font-weight: 700;
					color: rgba(153, 153, 153, 1);
				}
	
				.text1 {
					margin-top: 4rpx;
					font-size: 32rpx;
					font-weight: 700;
					color: rgba(226, 36, 23, 1);
				}
			}
	
			.xs-channel-total {
				.text {
	
	
					font-size: 30rpx;
					font-weight: 700;
					color: #999999;
				}
	
				.text1 {
					font-size: 30rpx;
					font-weight: 700;
					color: #E22417;
				}
	
	
			}
	
			.xs-channel-switch {
				background: #F5F5F7;
	
				border: 2rpx solid #F9F9F9;
				width: 236rpx;
				height: 76rpx;
				opacity: 1;
				padding: 8rpx;
				box-sizing: border-box;
				border-radius: 60rpx;
				position: absolute;
				top: 30rpx;
				right: 22rpx;
	
				.check {
					width: 116rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					border-radius: 30px;
					background: #FFFFFF;
					color: #2F2F2F;
				}
	
				.uncheck {
					width: 116rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					border-radius: 30px;
					color: rgba(153, 153, 153, 1);
					;
				}
			}
	
			.chart {
				margin-top: 44rpx;
				margin-left: 70rpx;
				margin-right: 70rpx;
				height: 64rpx;
			}
	
			.chart-lable {
				.item1 {
					justify-content: center;
					align-items: center;
					margin-top: 10rpx;
					margin-left: 10rpx;
	
					.box {
						padding: 0rpx;
						width: 28rpx;
						height: 28rpx;
						margin-right: 8rpx;
						border-radius: 4rpx;
					}
	
					.text1 {
						flex: 1;
						height: 28rpx;
						line-height: 48rpx;
						font-size: 24rpx;
						font-weight: 700;
						color: rgba(47, 47, 47, 1);
					}
				}
	
			}
	
			.goods_item {
				width: 100%;
				image {
					width: 80rpx;
					height: 80rpx;
					margin-right: 18rpx;
					margin-top: 30rpx;
				}
	
				.text {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(47, 47, 47, 1);
				}
	
				.ratio {
					width: 480rpx;
					height: 22rpx;
					border-radius: 50rpx;
					margin-right: 16rpx;
				}
			}
		}
	
</style>
